<template>
  <div class="container-fluid mt-4">
    <!-- <div class="row align-items-center">
      <div class="col-lg-4 col-sm-8">
        <nav-pill />
      </div>
    </div> -->
    <div class="row">
      <div class="col-lg-8">
        <div class="row mt-4">
          <div class="col-xl-6 mb-xl-0 mb-4">
            <master-card />
          </div>
          <div class="col-xl-6">
            <div class="row">
              <div class="col-md-6">
                <default-info-card
                  icon="text-white fas fa-landmark"
                  title="订单总数"
                  description="明星工厂本月交付订单总数"
                  value="200 笔"
                />
              </div>
              <div class="col-md-6">
                <default-info-card
                  icon="text-white fab fa-paypal"
                  title="本月盈利"
                  description="明星工厂本月盈利总额"
                  value="2,000,000 元"
                />
              </div>
            </div>
          </div>
          <div class="col-md-12 mb-4">
            <payment-methods-card />
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <invoice-Card />
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <mini-statistics-card
          title="今日新增工厂用户"
          value="5"
          :percentage="{
            value: '+55%',
            color: 'text-success',
          }"
          :icon="{
            component: 'ni ni-money-coins',
            background: iconBackground,
          }"
          direction-reverse
        />
      </div>
      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <mini-statistics-card
          title="今日在线工厂用户数"
          value="2,00"
          :percentage="{
            value: '+3%',
            color: 'text-success',
          }"
          :icon="{
            component: 'ni ni-world',
            background: iconBackground,
          }"
          direction-reverse
        />
      </div>
      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <mini-statistics-card
          title="在线数增长率"
          value="+5%"
          :percentage="{
            value: '-2%',
            color: 'text-danger',
          }"
          :icon="{
            component: 'ni ni-paper-diploma',
            background: iconBackground,
          }"
          direction-reverse
        />
      </div>
      <div class="col-lg-3 col-sm-6">
        <mini-statistics-card
          title="目前工厂用户总数"
          value="4,50"
          :percentage="{
            value: '+5%',
            color: 'text-success',
          }"
          :icon="{
            component: 'ni ni-cart',
            background: iconBackground,
          }"
          direction-reverse
        />
      </div>
    </div>

    <div class="row mt-4">
      <div class="col-md-9">
        <authors-table />
      </div>
      <div class="col-lg-3 col-md-6">
        <timeline-list
          class="h-100"
          title="工厂操作记录"
          description="<i class='fa fa-arrow-down text-success' aria-hidden='true'></i>
        <span class='font-weight-bold'>24%</span> "
        >
          <timeline-item
            color="success"
            icon="bell-55"
            title="开启张三工厂"
            date-time="22 DEC 7:20 PM"
          />
          <TimelineItem
            color="danger"
            icon="html5"
            title="封停李四工厂"
            date-time="21 DEC 11 PM"
          />
          <TimelineItem
            color="danger"
            icon="html5"
            title="封停小B工厂"
            date-time="21 DEC 11 PM"
          />
          <TimelineItem
            color="danger"
            icon="html5"
            title="封停小C工厂"
            date-time="21 DEC 11 PM"
          />
          <TimelineItem
            color="danger"
            icon="html5"
            title="封停张三工厂"
            date-time="21 DEC 11 PM"
          />
        </timeline-list>
      </div>
    </div>
  </div>
</template>

<script>
import setTooltip from "@/assets/js/tooltip.js";
// import NavPill from "./components/NavPill.vue";
import MasterCard from "./components/MasterCard.vue";
import DefaultInfoCard from "@/examples/Cards/DefaultInfoCard.vue";
import PaymentMethodsCard from "./components/PaymentMethodsCard.vue";
import InvoiceCard from "./components/InvoiceCard.vue";
// import BillingCard from "./components/BillingCard.vue";
// import RankingList from "@/examples/Cards/RankingList.vue";
// import RankingListCard from "@/examples/Cards/RankingListCard.vue";
import MiniStatisticsCard from "./components/MiniStatisticsCard.vue";
import TimelineList from "./components/TimelineList.vue";
import TimelineItem from "./components/TimelineItem.vue";
import AuthorsTable from "./components/AuthorsTable";

export default {
  name: "Billing",
  data() {
    return{
      iconBackground: "bg-gradient-success",
    };
  },
  components: {
    // NavPill,
    MasterCard,
    DefaultInfoCard,
    PaymentMethodsCard,
    InvoiceCard,
    // BillingCard,
    // RankingList,
    // RankingListCard,
    MiniStatisticsCard,
    TimelineList,
    TimelineItem,
    AuthorsTable,
  },
  mounted() {
    setTooltip();
  },
};
</script>
